<template>
  <div>
    <div v-if="homeworkAnswer.length>0" class="c-mt24">
      <audio id="audio" @ended="playAudioEnd" class="c-pf c-p-l-100"></audio>
      <div class="c-flex-row c-aligni-center c-justify-sb">
        <img class="c-ww68 c-hh68 c-brp50" :src="$addXossFilter(userAnswer.headimgurl || require('@/assets/defult_head.png'))" alt="" />
        <div class="c-pl20 c-flex-grow1 c-w0">
          <div class="c-fs24 c-flex-row c-aligni-center c-justify-sb">
            <div class="c-flex-row">
              <span class="c-maxw160 c-pr20 c-text-ellipsis1 c-fc-xblack">{{userAnswer.nickname || '未知'}}</span>
            </div>
          </div>
        </div>
        <div class="c-flex-row c-aligni-center" v-if="isOther==0">
          <div class="c-flex-row c-aligni-center c-justify-end c-mr12 c-mt10">
            <div class="theme-bg c-fc-white c-pv10 c-ph24 c-br32 c-fs20" @click="reWorker">重新编辑</div>
          </div>
          <div class="c-flex-row c-aligni-center c-justify-end c-mt10">
            <div class="theme-bd1 theme-fc c-pv10 c-ph24 c-br32 c-fs20" @click="lookAncy">查看解析</div>
          </div>
        </div>
      </div>
      <div class="c-bg-white c-br20 c-mt20 c-pv20 c-ph24" v-for="(item,index) in homeworkAnswer" :key="index" v-if="index<answerList">
        <div v-if="item.type==1 || item.type==2 || item.type==4">
          <div class="c-flex-row c-aligni-center">
            <div class="c-fs26 c-fc-xblack c-fw600">{{index + 1}}</div>
            <div class="c-fs26 c-fc-xblack c-ml20 c-mr20">{{ item.answer }}</div>
            <div class="c-fs26 iconfont isRight" v-if="item.isRight==1">&#xe774;</div>
            <div class="c-fs26 iconfont isWrong" v-else>&#xe773;</div>
          </div>
        </div>
        <div v-else-if="item.type==5">
          <div class="c-fs26 c-fc-xblack c-fw600">{{index + 1}}</div>
          <div class="c-ph24 c-flex-row c-pv30 c-fs26 c-br16 c-bg-sblack c-mt20 c-bg-sgray" v-for="(jtem,index) in item.answer" :key="index">
            <div class="c-mr20 c-mt4">{{index + 1}}</div>
            <div class="c-flex-grow1 c-mr10">{{jtem.value }}</div>
          </div>
        </div>
        <div class="c-fs26" v-else-if="item.type==3">
          <div class="c-fs26 c-fc-xblack c-fw600">{{index + 1}}</div>
          <answerText v-if="item.answer" :answer="item.answer" :answerIndex="index"></answerText>
          <!-- 文本回答 -->
          <!-- <div v-if="item.answer" :class="
          showMore && showDescAnswer ? '' : 'c-maxh150 c-text-hidden maxMask'">
          <div class="c-p c-lh42 c-pl10" :id="'textAnswer'" ref="textAnswer" >
            <div class="c-ww-bw c-lh42" v-html="item.answer"></div>
          </div>
        </div>
        <div class="c-flex-row c-justify-end c-w100" v-if="item.answer">
          <div @click.stop="clickShowMore" v-if="showDescAnswer" class="theme-fc c-fs20">{{showMore ? '收起':'展开'}}</div>
        </div> -->
          <div :class="{'c-mt20': item.answer}">
            <div class="c-flex-row c-flexw-wrap">
              <!-- 语音回答 -->
              <div @click.stop="clickPlayAudio(jtem.url)" v-for="(jtem,index) in item.audioArr" :key="index"
                class="c-ww166 c-hh60 c-br30 theme-bg-10 c-pl24 c-pr10 c-flex-row c-p c-flex-row c-aligni-center c-mb20" :class="(index+1)%3==0?'':'c-mr22'">
                <div class="box c-ww32">
                  <div class="wifi-symbol">
                    <div class="wifi-circle first theme-bd2"></div>
                    <div class="wifi-circle second theme-bd2" :class="playAduioSrc != jtem.url?'':'seconAnimation'"></div>
                    <div class="wifi-circle third theme-bd2" :class="playAduioSrc != jtem.url?'':'thirdAnimation'"></div>
                  </div>
                </div>
                <div class="c-fs20 theme-fc">{{changeTimeStr(jtem.time)}}</div>
              </div>
            </div>
            <div class="c-flex-row c-flexw-wrap">
              <!-- 视频回答 -->
              <div @click.stop="clickShowVideo(jtem.realUrl)" class="c-p c-ww166 c-hh100 c-mb20" :class="(index+1)%3==0?'':'c-mr22'" v-for="(jtem,index) in item.videoArr" :key="index">
                <img class="c-w100 c-h c-br20" :src="$addXossFilter(jtem.videoCover, 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg4.png')" alt="" />
                <div v-if="jtem.videoCover" class="img-play-btn c-br20">
                  <i class="iconfont c-fs40 c-fc-white">&#xe869;</i>
                </div>
              </div>
            </div>
            <!-- 图片回答 -->
            <div class="c-flex-row c-flexw-wrap">
              <div class="c-ww166 c-hh166 c-mb20 c-p" :class="(index+1)%3==0?'':'c-mr22'" v-for="(jtem,index) in item.imgArr" :key="index">
                <img @click.stop="clickPreviewImage(jtem.url, item.imgArr)" class="c-w100 c-br20 c-ww166 c-hh166 " :src="$addXossFilter(jtem.url)" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="c-flex-row c-aligni-center">
            <div class="c-fs26 c-fc-xblack c-fw600">{{index + 1}}</div>
            <div class="c-fs26 c-fc-xblack c-ml20 c-mr20">无</div>
          </div>
        </div>
        <div class="c-ph24 c-pb20" v-if="item.comments">
          <div class="c-bg-sgray c-br20 c-ph14">
            <div class="c-flex-row c-aligni-center c-justify-sb c-ph10">
              <div class="c-fs28 c-fc-xblack c-fw600">老师点评</div>
              <div class="iconfont c-fs80 theme-fc">&#xe7cb;</div>
            </div>
            <div class="c-fs24">
              <!-- 文本回答 -->
              <div v-if="item.comments">
                <div class="c-p c-lh42 c-pl10">
                  <div class="c-ww-bw c-lh42" v-for="(cItem,cIndex) in item.comments.comments.split('\n')" :key="cIndex">{{cItem}}</div>
                </div>
              </div>
              <div :class="{'c-mt20': item.comments.comments}">
                <div class="c-flex-row c-flexw-wrap">
                  <!-- 语音回答 -->
                  <div @click.stop="clickPlayAudio(item.url)" v-for="(item,index) in item.comments.audioArr" :key="index"
                    class="c-ww166 c-hh60 c-br30 theme-bg-10 c-pl24 c-pr10 c-flex-row c-p c-flex-row c-aligni-center c-mb20 c-mh10">
                    <div class="box c-ww32">
                      <div class="wifi-symbol">
                        <div class="wifi-circle first theme-bd2"></div>
                        <div class="wifi-circle second theme-bd2" :class="playAduioSrc != item.url?'':'seconAnimation'"></div>
                        <div class="wifi-circle third theme-bd2" :class="playAduioSrc != item.url?'':'thirdAnimation'"></div>
                      </div>
                    </div>
                    <div class="c-fs20 theme-fc">{{changeTimeStr(item.time)}}</div>
                  </div>
                </div>
                <span @click.stop="clickPreviewImage(item.comments.imgArr[0].url,item.comments.imgArr)" v-if="item.comments.imgArr&&item.comments.imgArr.length" class="c-fs20 theme-fc c-mh10 c-inlineblack c-mb16">点击查看图片</span>
                <span v-if="item.comments.videoArr && item.comments.videoArr.length" v-for="(item,index) in item.comments.videoArr" :key="index" @click.stop="clickShowVideo(item.videoMp4,item.videoM3u8)" class="c-fs20 theme-fc c-mh10 c-inlineblack c-mb16">点击查看视频</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="c-fs24 c-flex-row c-aligni-center c-justify-sb c-mt20">
        <div class="c-fs20 c-fc-gray">提交时间:{{submitTime || '未知'}}</div>
        <div class="c-flex-row c-aligni-center">
          <div class="c-fs24 theme-fc c-mr10">{{userAnswer.like}}</div>
          <div class="iconfont c-fs36 theme-fc" @click="setLike(userAnswer.isLike,userAnswer.id)">{{userAnswer.isLike?'&#xe6f9;':'&#xe6ba;'}}</div>
        </div>
      </div>
      <div class="c-flex-row c-flex-center c-pv20" v-if="answerList<=homeworkAnswer.length">
        <div class="theme-fc c-fs24" @click="showMoreAnswerList">查看更多</div>
      </div>
    </div>
  </div>
</template>
<script>
import { utilJs, wxUtilJs } from "@/utils/common.js";
import answerText from '@/components/templates/schoolAssignment/answer.vue';
export default {
  name: "homeworkerResult",
  components: {
     answerText
  },
  props: {
    homeworkAnswer: {
      type: Array,
      default: []
    },
    userAnswer: {
      type: Object,
      default: {}
    },
    submitTime: {
      type: String,
      default: ''
    },
    isOther: {
      type: String,
      default: 0
    },
    AnswerIndex: {
      type: String,
      default: 0
    },
    isMy: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      showmoTest:false,
      moreQue:false,
      showMore:false,
      showDescAnswer:false,
      currentVideoObj:{},
      playAduioSrc:'',
      showVideo:false,
      answerList:5
    };
  },
  watch: {
    homeworkAnswer(val) {
      let that = this
        this.$nextTick(() => {
              //获取当前内容的行高，超过3行则显示更多
        let queryTextContent = document.querySelectorAll("#textAnswer");
        if (!queryTextContent) {
          return;
        }
        console.log()
        if (that.$refs.textAnswer && that.$refs.textAnswer.offsetHeight <= 89) {
          that.showDescAnswer = false
        } else {
          that.showDescAnswer = true
        }
      })
    }
  },
  mounted() {
    this.showDescHeight()
  },
  methods: {
    setLike(isLike, id) {
      this.$emit('setLike', this.AnswerIndex, this.isMy, id, isLike)
    },
    showMoreAnswerList() {
      this.answerList = this.answerList + 5
    },
    clickShowVideo(videoMp4, videoM3u8) {
      this.$emit('clickShowVideo', videoMp4, videoM3u8)
    },
    reWorker() {
      this.$emit('reWorker')
    },
    lookAncy() {
      this.$emit('lookAncy')
    },
    //监听音频播放结束执行的内容
    playAudioEnd() {
      console.log('播放结束')
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
    },
    clickPreviewImage(imgUrl, imgArrList) {
      if (!imgUrl) {
        return;
      }
      let imgArr = [];
      for (let key of imgArrList) {
        let imgItemUrl = key.content || key.url;
        imgArr.push(imgItemUrl);
      }
      let imgData = {
        current: imgUrl, // 当前显示图片的http链接
        urls: imgArr
      }
      wxUtilJs.previewImage(imgData)
      // wxUtilJs.previewImage({
      //   current: imgUrl, // 当前显示图片的http链接
      //   urls: imgArr // 需要预览的图片http链接列表
      // });
    },
    //时间转换成"形式
    changeTimeStr(timeStr) {
      return utilJs.timeTmpToNsTime(timeStr)
    },
    clickPlayAudio(audioUrl) {
      let audio = document.getElementById("audio");
      if (this.playAduioSrc == audioUrl) {
        this.playAduioSrc = "";
        document.getElementById("audio").src = this.playAduioSrc;
        return;
      }
      this.playAduioSrc = audioUrl;

      //返回mp3则用audio播放
      if (this.playAduioSrc && this.playAduioSrc.includes("http")) {
        document.getElementById("audio").src = this.playAduioSrc;
        audio.play();
      }
    },
    clickShowMore() {
      this.showMore = !this.showMore
    },
    showMoreQue() {
      this.moreQue = !this.moreQue
    },
    showDescHeight() {
        this.$nextTick(() => {
          //获取当前内容的行高，超过3行则显示更多
        if (!!this.$refs.bigProblem && this.$refs.bigProblem.offsetHeight < 80) {
              this.showmoTest = false
            } else {
              this.showmoTest = true
            }
        })
    }
  },
  destroyed() {
  }
};
</script>

<style scoped>
.imgInlineb  /deep/ img{display: inline-block;vertical-align: middle;}
.problemdDom /deep/ img{
  display: inline-block;
  vertical-align: middle;
}
.problemdDom /deep/ p{
  text-align: left!important;
}
.problemdDom /deep/ p img{
  display: block;
}
.problemdDom /deep/ .wscnph{
  display: block;
}
.maxMask {
  mask-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.7) 10%,
    rgba(255, 255, 255, 1) 15%,
    rgba(255, 255, 255, 1) 100%
  );
}
.isRight{
  color: #71DB77;
}
.isRightBg{
  background: rgba(113,219,119,0.1);
}
.isWrong{
  color: #FB806D;
}
.isWrongBg{
  background: rgba(251,128,109,0.1);
}
.box {
  box-sizing: border-box;
  position: relative;
}
.wifi-symbol {
  width: 1rem;
  height: 1rem;
  overflow: hidden;
  position: relative;
  transform: rotate(135deg);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: translate3d(135deg,0,0);
  -webkit-backface-visibility: hidden;
}
.wifi-circle {
  /* border: 0.1rem solid #999999; */
  border-radius: 50%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  position: absolute;
  -webkit-transform: translate3d(0,0,0);
}

.first {
  width: 0.1rem;
  height: 0.1rem;
  background: #cccccc;
  top: 0.9rem;
  left: 0.9rem;
}
.second {
  width: 0.5rem;
  height: 0.5rem;
  top: 0.7rem;
  left: 0.7rem;
}
.seconAnimation{
  animation: fadeInOut 1s infinite 0.2s;
}
.third {
  width: 0.8rem;
  height: 0.8rem;
  top: 0.5rem;
  left: 0.5rem;
}
.thirdAnimation{
  animation: fadeInOut 1s infinite 0.4s;
}
@keyframes fadeInOut {
    0% {
        opacity: 0; /*初始状态 透明度为0*/
    }
    100% {
        opacity: 1; /*结尾状态 透明度为1*/
    }
}
</style>
